<template>
  <el-card class="box-card">
    <itable
    :table="tconfig.tableConfig"
    :tableData="tconfig.tableData"
    :page-bean="tconfig.pageBean"
    @pageChange="pageChange"
    >
      <template #searchBox>
        <Eform
          :model="form"
          :elem="fromData"
          :submit="true"
          :reset="true"
          :button="false"
          okIcon="Search"
          btnSize="default"
          submitText="搜索"
          @onSuccess="onSuccess"
          @onReset="onReset"
          >
        </Eform>
      </template>
      <template #headerbtn>
        <el-button type="primary" plain @click="chilkexport" icon="Download">导出</el-button>
      </template>
    </itable>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { PageBean } from "@/utils/page-bean";
import itable from '@/components/table/table.vue'
import Eform from '@/components/eform/index.vue';
import moment from 'moment'
import useCurrentInstance from '@/utils/useCurrentInstance'

const { proxy } = useCurrentInstance()
const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [] as any[],
  pageBean: new PageBean(10, 1, 0),
})

let form = reactive({
  staff:'',
  content:'',
  date:'',
  time:'',
  is_unfinished:'1',
  page:1,
  size:10
})
let fromData = reactive([
  {
    label: "员工姓名",
    prop: "staff",
    clearable: true,
  },
  {
    label: "日期",
    prop: "time",
    element:'date',
    type:"daterange",
    format:'YYYY-MM-DD',
    clearable: true,
  },
  {
    label: "工作内容筛选",
    prop: "content",
    labelWidth:'120',
    clearable: true,
  }
])

// 重置
const onReset = () => {
  tconfig.pageBean.pageIndex = 1
  form.date = ''
  getRecordRegister()
}
// 搜索
const onSuccess = () => {
  tconfig.pageBean.pageIndex = 1
  form.date = form.time ? form.time.join() : ''
  getRecordRegister()
}
// 导出
const chilkexport = () => {
  form.size = tconfig.pageBean.Total
  proxy.$api.getStaffExport(form).then(res => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel'});
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, 'test')
    } else {
        const href = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = href
        a.download = proxy.$moment().format('YYYY年MM月DD日')+' 员工未完成台账'
        a.click()
        URL.revokeObjectURL(a.href)
    }
  })
  form.size = 10
}
// 台账列表
const getRecordRegister = () => {
  tconfig.tableConfig.loading = true
  form.page = tconfig.pageBean.pageIndex
  proxy.$api.getRecordStaff(form).then(res =>{
    tconfig.tableData = res.result.lists
    tconfig.tableConfig.loading = false
    tconfig.pageBean.Total = res.result.total_rows
  }).catch(err => tconfig.tableConfig.loading = true)
}
getRecordRegister()

// 分页
const pageChange = () => {
  getRecordRegister()
}
// 初始化表格
const initTable = () => {
  tconfig.tableConfig = {
    loading: false,
    hasSelect: false,
    hasIndex: true,
    hasOperation: false,
    hasSearch: true,
    hasPage: true,
    headerShowBtn:true,
    tr: [
      {
        label: "员工姓名",
        prop: "staff_name",
      },
      {
        label: "工作内容",
        prop: "content",
      },
      {
        label: "应进行日期",
        prop: "created_at"
      }
    ]
  }
}
initTable()
</script>

<style lang='scss' scoped>

</style>
